<template>
    <view class="register-container">
        <!-- 返回按钮 -->
        <view class="back-btn" @tap="goToLogin">
            <text class="iconfont icon-arrow-left"></text>
        </view>
        
        <!-- 背景图 -->
        <image class="bg-image" src="/static/images/icon4.jpeg" mode="aspectFill"></image>
        <view class="overlay"></view>
        
        <view class="header">
            <image class="logo" src="/static/images/icon4.jpeg" mode="aspectFill"></image>
            <text class="welcome">创建账号</text>
            <text class="sub-welcome">加入我们的婚纱定制之旅</text>
        </view>
        
        <view class="register-form">
            <view class="form-group">
                <view class="form-item" :class="{ 'active': focusField === 'username' }">
                    <text class="icon iconfont icon-user"></text>
                    <input 
                        type="text" 
                        v-model.trim="form.username" 
                        placeholder="请输入用户名" 
                        @focus="handleFocus('username')"
                        @blur="validateField('username')"
                    />
                </view>
                <text class="error-tip" v-if="errors.username">{{ errors.username }}</text>
            </view>
            
            <view class="form-group">
                <view class="form-item" :class="{ 'active': focusField === 'account' }">
                    <text class="icon iconfont icon-idcard"></text>
                    <input 
                        type="text" 
                        v-model.trim="form.account" 
                        placeholder="请输入账号" 
                        @focus="handleFocus('account')"
                        @blur="validateField('account')"
                    />
                </view>
                <text class="error-tip" v-if="errors.account">{{ errors.account }}</text>
            </view>
            
            <view class="form-group">
                <view class="form-item" :class="{ 'active': focusField === 'phone' }">
                    <text class="icon iconfont icon-phone"></text>
                    <input 
                        type="number" 
                        v-model.trim="form.phone" 
                        placeholder="请输入手机号" 
                        @focus="handleFocus('phone')"
                        @blur="validateField('phone')"
                    />
                </view>
                <text class="error-tip" v-if="errors.phone">{{ errors.phone }}</text>
            </view>
            
            <view class="form-group">
                <view class="form-item" :class="{ 'active': focusField === 'email' }">
                    <text class="icon iconfont icon-email"></text>
                    <input 
                        type="email" 
                        v-model.trim="form.email" 
                        placeholder="请输入邮箱" 
                        @focus="handleFocus('email')"
                        @blur="validateField('email')"
                    />
                </view>
                <text class="error-tip" v-if="errors.email">{{ errors.email }}</text>
            </view>
            
            <view class="form-group">
                <view class="form-item" :class="{ 'active': focusField === 'password' }">
                    <text class="icon iconfont icon-lock"></text>
                    <input 
                        :type="showPassword ? 'text' : 'password'" 
                        v-model="form.password" 
                        placeholder="请输入密码"
                        @focus="handleFocus('password')"
                        @blur="validateField('password')"
                    />
                    <text class="icon-btn" @tap="togglePassword">
                        <text class="iconfont" :class="showPassword ? 'icon-eye' : 'icon-eye-close'"></text>
                    </text>
                </view>
                <text class="error-tip" v-if="errors.password">{{ errors.password }}</text>
            </view>
            
            <view class="form-group">
                <view class="form-item" :class="{ 'active': focusField === 'confirmPassword' }">
                    <text class="icon iconfont icon-lock"></text>
                    <input 
                        :type="showConfirmPassword ? 'text' : 'password'" 
                        v-model="form.confirmPassword" 
                        placeholder="请确认密码"
                        @focus="handleFocus('confirmPassword')"
                        @blur="validateField('confirmPassword')"
                    />
                    <text class="icon-btn" @tap="toggleConfirmPassword">
                        <text class="iconfont" :class="showConfirmPassword ? 'icon-eye' : 'icon-eye-close'"></text>
                    </text>
                </view>
                <text class="error-tip" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
            </view>

            <button 
                class="register-btn" 
                @tap="handleRegister"
                :disabled="isLoading || !isFormValid"
                :loading="isLoading"
            >
                <text class="btn-text">{{ isLoading ? '注册中...' : '注册' }}</text>
            </button>

            <view class="actions">
                <text class="action-text">已有账号？</text>
                <text class="action-link" @click="goToLogin">立即登录</text>
            </view>
        </view>
    </view>
</template>

<script>
import API from '@/api/config.js'

export default {
    data() {
        return {
            form: {
                username: '',
                account: '',
                phone: '',
                email: '',
                password: '',
                confirmPassword: ''
            },
            errors: {
                username: '',
                account: '',
                phone: '',
                email: '',
                password: '',
                confirmPassword: ''
            },
            isLoading: false,
            showPassword: false,
            showConfirmPassword: false,
            focusField: ''
        }
    },
    computed: {
        isFormValid() {
            return this.form.username && 
                   this.form.account &&
                   this.form.phone &&
                   this.form.email &&
                   this.form.password && 
                   this.form.confirmPassword && 
                   !this.errors.username &&
                   !this.errors.account &&
                   !this.errors.phone &&
                   !this.errors.email &&
                   !this.errors.password && 
                   !this.errors.confirmPassword
        }
    },
    methods: {
        handleFocus(field) {
            this.focusField = field
        },
        
        togglePassword() {
            this.showPassword = !this.showPassword
        },
        
        toggleConfirmPassword() {
            this.showConfirmPassword = !this.showConfirmPassword
        },
        
        validateField(field) {
            this.focusField = ''
            this.errors[field] = ''
            
            switch(field) {
                case 'username':
                    if (!this.form.username) {
                        this.errors.username = '请输入用户名'
                    } else if (this.form.username.length < 3) {
                        this.errors.username = '用户名至少3个字符'
                    }
                    break
                    
                case 'account':
                    if (!this.form.account) {
                        this.errors.account = '请输入账号'
                    } else if (this.form.account.length < 4) {
                        this.errors.account = '账号至少4个字符'
                    }
                    break
                    
                case 'phone':
                    if (!this.form.phone) {
                        this.errors.phone = '请输入手机号'
                    } else if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
                        this.errors.phone = '请输入有效的手机号'
                    }
                    break
                    
                case 'email':
                    if (!this.form.email) {
                        this.errors.email = '请输入邮箱'
                    } else if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.form.email)) {
                        this.errors.email = '请输入有效的邮箱地址'
                    }
                    break
                    
                case 'password':
                    if (!this.form.password) {
                        this.errors.password = '请输入密码'
                    } else if (this.form.password.length < 6) {
                        this.errors.password = '密码至少6个字符'
                    }
                    break
                    
                case 'confirmPassword':
                    if (!this.form.confirmPassword) {
                        this.errors.confirmPassword = '请确认密码'
                    } else if (this.form.confirmPassword !== this.form.password) {
                        this.errors.confirmPassword = '两次输入的密码不一致'
                    }
                    break
            }
            
            return !this.errors[field]
        },
        
        async handleRegister() {
            if (this.isLoading) return
            
            if (!this.isFormValid) return
            
            this.isLoading = true
            
            try {
                const res = await uni.request({
                    url: API.REGISTER,
                    method: 'POST',
                    data: {
                        username: this.form.username,
                        account: this.form.account,
                        phone: this.form.phone,
                        email: this.form.email,
                        password: this.form.password
                    }
                })
                
                const { code, msg, data } = res.data
                
                if (code === 200) {
                    uni.showToast({
                        title: '注册成功',
                        icon: 'success'
                    })
                    
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                } else {
                    uni.showToast({
                        title: msg || '注册失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('注册失败:', error)
                uni.showToast({
                    title: '网络错误，请稍后重试',
                    icon: 'none'
                })
            } finally {
                this.isLoading = false
            }
        },
        
        goToLogin() {
            uni.navigateBack()
        }
    }
}
</script>

<style scoped>
.register-container {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 40rpx;
}

.back-btn {
    position: fixed;
    left: 30rpx;
    top: 60rpx;
    z-index: 100;
    width: 72rpx;
    height: 72rpx;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn .iconfont {
    font-size: 36rpx;
    color: #ffffff;
}

.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 60rpx;
    margin-top: 80rpx;
    padding-right: 40rpx;
}

.logo {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
    margin-bottom: 30rpx;
    border: 4rpx solid rgba(255, 255, 255, 0.2);
}

.welcome {
    font-size: 40rpx;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 12rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.sub-welcome {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.register-form {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 30rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
    border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: 24rpx;
}

.form-item {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16rpx;
    padding: 0 30rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
}

.form-item.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: #e0b080;
    box-shadow: 0 0 20rpx rgba(224, 176, 128, 0.1);
}

.form-item .icon {
    font-size: 36rpx;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 20rpx;
}

.form-item.active .icon {
    color: #e0b080;
}

.icon-btn {
    padding: 20rpx;
    color: rgba(255, 255, 255, 0.6);
}

input {
    flex: 1;
    height: 88rpx;
    font-size: 28rpx;
    color: #ffffff;
    background: transparent;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

input::placeholder {
    color: #ffffff;
    opacity: 0.8;
    font-weight: normal;
    font-size: 28rpx;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.error-tip {
    font-size: 24rpx;
    color: #ff6b6b;
    padding: 8rpx 0 0 30rpx;
}

.register-btn {
    margin-top: 40rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #e0b080, #d4946f);
    border-radius: 44rpx;
    color: #1a1a1a;
    font-size: 30rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    border: none;
    position: relative;
    overflow: hidden;
}

.register-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
}

.register-btn:active {
    transform: scale(0.98);
}

.register-btn:disabled {
    opacity: 0.6;
    transform: none;
}

.actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
}

.action-text {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.6);
}

.action-link {
    font-size: 26rpx;
    color: #e0b080;
    margin-left: 12rpx;
}
</style> 